<template>
    <div style="padding:1%;margin-left: 15%;height: 100%;background-color: #f5f7f9;!important;">
        <Card :bordered="false" dis-hover>
            <p slot="title"
               style="font-size: larger;font-weight: bolder;display: flex;justify-content: space-between;height: 36px">
                <span>首页管理 / 建议列表</span>
            </p>
            <!--建议表格-->
            <div style="height:480px">
                <Table height="472" stripe :columns="bugColumns" :data="bugList">
                    <template slot-scope="{ row }" slot="user">
                            <span class="ivu-avatar ivu-avatar-circle ivu-avatar-image ivu-avatar-large">
                                <img v-show="row.user!==null" style="width: 40px;height: 40px"
                                     :src="row.user!==null?row.user.uheadpicture:uheadpicture">
                            </span>
                        <span style="margin-left: 10px"
                              class="i-layout-header-user-name">{{row.user!==null?row.user.unickname:'无'}}</span>
                    </template>
                    <template slot-scope="{ row }" slot="action">
                        <Button ghost type="error" size="small" icon="md-trash" @click="deleteBug(row.bugId)">删除
                        </Button>
                    </template>
                </Table>
            </div>
            <!--分页-->
            <div>
                <Page style="height: 30px" :total="total" :page-size="bugVo.pageSize" show-elevator show-sizer
                      show-total @on-change="changePageNum" :page-size-opts="pageSizeChoice"
                      @on-page-size-change="changePageSize"/>
            </div>
        </Card>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        bugVo: {
          pageNum: 1,
          pageSize: 9,
          my: false
        },
        total: 0,
        // 每页个数选择
        pageSizeChoice: [9, 15, 30, 50, 100],
        bugList: [],
        bugColumns: [
          {
            type: 'index',
            align: 'center'
          },
          {
            title: 'BUG内容',
            key: 'bugContent',
            align: 'center',
            width: '360px'
          },
          {
            title: 'BUG反馈时间',
            key: 'bugTime',
            align: 'center'
          },
          {
            title: 'BUG发布者',
            slot: 'user'
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center'
          }
        ]
      }
    },
    mounted() {
      this.getBugs()
    },
    methods: {
      getBugs() {
        this.$http.get('bug', { params: new URLSearchParams(this.bugVo) }).then(res => {
          res = res.data
          this.bugList = res.data
          this.total = res.count
        })
      },
      // 改变当前页码
      changePageNum(pagenum) {
        this.bugVo.pageNum = pagenum
        this.getBugs()
      },
      // 改变每页个数
      changePageSize(pagesize) {
        this.bugVo.pageSize = pagesize
        this.getBugs()
      },
      // 删除BUG
      deleteBug(id) {
        this.$Modal.confirm({
          title: '删除',
          content: '您确定要删除该BUG反馈吗？',
          onOk: () => {
            this.$http.delete(`bug?id=${id}`).then(res => {
              res = res.data;
              if (res.code === 6910) {
                this.getBugs()
                this.$Message.success(res.msg)
              } else {
                this.$Message.error(res.msg)
              }
            })
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
